{#<!DOCTYPE html>#}
{#<html lang="zh-CN">#}
{##}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{#    <title>高光谱图像分类</title>#}
{#    <link rel="stylesheet" href="/static/styles.css">#}
{#</head>#}
{##}
{#<body>#}
{#    <header>#}
{#        <h1>高光谱图像分类</h1>#}
{#    </header>#}
{#    <main>#}
{#        <section id="comparison-image-section">#}
{#            <h2>预期效果</h2>#}
{#            <img id="comparison-image" src="/static/images/eg.png" alt="效果图片">#}
{#        </section>#}
{#        <section id="upload-section">#}
{#            <form id="upload-form" method="post" action="/" enctype="multipart/form-data">#}
{#                <label for="image1">选择图像文件 corrected</label><br>#}
{#                <input type="file" id="image1" name="image1" accept=".mat"><br>#}
{#                <label for="image2">选择图像文件 gt</label><br>#}
{#                <input type="file" id="image2" name="image2" accept=".mat"><br>#}
{#                <div id="custom-upload-area">#}
{#                    <span class="plus-icon">+</span>#}
{#                </div>#}
{#                <progress id="progress-bar" value="0" max="100" style="display: none;"></progress>#}
{#                <div id="result"></div>#}
{#                <button type="submit" value="submit">上传并分类</button>#}
{#            </form>#}
{#            <progress id="progress-bar" value="0" max="100" style="display: none;"></progress>#}
{#        </section>#}
{#        <section id="classified-image-section">#}
{#            <h2>分类结果</h2>#}
{#            <img src="{{ url_for('static', filename='output_image.png') }}" alt="结果">#}
{#        </section>#}
{#    </main>#}
{##}
{#    <footer>#}
{#        <p>小组序号：8&emsp;&emsp;&emsp;&emsp;小组名称：你的强来了&emsp;&emsp;&emsp;&emsp;小组成员：陈静芸、冯欣怡、尉曼琦、吕馨悦</p>#}
{#    </footer>#}
{##}
{#</body>#}
{##}
{#</html>#}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高光谱图像分类</title>
    <link rel="stylesheet" href="/static/styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
        $(document).ready(function () {
            let intervalId;

            function checkForNewImage() {
                $.ajax({
                    url: '/check_new_image',
                    type: 'GET',
                    success: function (response) {
                        if (response.new_image_url) {
                            $('#classified-image-section img').attr('src', response.new_image_url);
                            clearInterval(intervalId);  // 只需要更新一次
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                    }
                });
            }

            $('#upload-form').on('submit', function (event) {
                event.preventDefault();  // 防止表单默认提交行为

                var formData = new FormData(this);

                $.ajax({
                    url: '/',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        // 动态更新图像
                        $('#classified-image-section img').attr('src', response.image_url);
                        intervalId = setInterval(checkForNewImage, 5000);  // 每5秒检查一次
                    },
                    error: function (error) {
                        console.error('Error:', error);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <header>
        <h1>高光谱图像分类</h1>
    </header>
    <main>
        <section id="comparison-image-section">
            <h2>预期效果</h2>
            <img id="comparison-image" src="/static/images/eg.png" alt="效果图片">
        </section>
        <section id="upload-section">
            <form id="upload-form" method="post" action="/" enctype="multipart/form-data">
                <label for="image1">选择图像文件 corrected</label><br>
                <input type="file" id="image1" name="image1" accept=".mat"><br>
                <label for="image2">选择图像文件 gt</label><br>
                <input type="file" id="image2" name="image2" accept=".mat"><br>
                <div id="result"></div>
                <button type="submit" value="submit">上传并分类</button>
            </form>
            <progress id="progress-bar" value="0" max="100" style="display: none;"></progress>
        </section>
        <section id="classified-image-section">
            <h2>分类结果</h2>
            <img src="{{ url_for('static', filename='output_image.png') }}" alt="结果">
        </section>
    </main>

    <footer>
        <p>小组序号：8&emsp;&emsp;&emsp;&emsp;小组名称：你的强来了&emsp;&emsp;&emsp;&emsp;小组成员：陈静芸、冯欣怡、尉曼琦、吕馨悦</p>
    </footer>

</body>

</html>

